<div class="container">
  <div class="photo-list">
    <div class="ui grid">
      <div class="ui horizontal segments">
       
      </div>

    </div>
    <table class="ui table">
      <thead>
        <tr>
          <th></th>
          <th>Task Name</th>
          <th>Task Describle</th>
          <th>Task StartTime</th>
          <th>Task EndTime</th>
          <th>Task Operation</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor = "#task of tasks">
          <td class="collapsing">
            <div class="ui fitted slider checkbox">
              <input type="checkbox" value={{task.taskId}} 
              [(ngModel)]="task.selected" > <label></label>
            </div>
          </td>
          <td>{{task.taskName}}</td>
          <td>{{task.taskDescrible}}</td>
          <td>{{task.startTime}}</td>
          <td>{{task.endTime}}</td>
          <td>
            <a  *ngIf = "task.isComplete" class="ui green "  >已完成</a>
            <a  *ngIf = "!task.isComplete" class="ui button" (click)="onSelect(task)" >TODO</a></td>
        </tr>
      
      </tbody>
    </table>
<br>
    <hr>

    <a class="ui button" [routerLink]="['AddTaskInfo']">Add Task</a>
    <a class="ui button" (click)="onShared()" >Share Task</a>
  </div>
  <div class="ui modal">
    <i class="close icon"></i>
    <div class="header">
     Share Task
    </div>
    <div class="image content">
      <table class="ui table">
        <thead>
          <tr>
            <th></th>
            <th>User Name</th>
            <th>Email</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor = "#user of users">
            <td class="collapsing">
              <div class="ui checkbox">
                <input type="checkbox"  [(ngModel)]="user.selected"> <label></label>
              </div>
            </td>
            <td>{{user.userName}}</td>
            <td>{{user.email}}</td>
            
          </tr>
        
        </tbody>
      </table>
    </div>
    <div class="actions">
      <div class="ui black deny button">
        Cancel
      </div>
      <div class="ui positive right labeled icon button" (click)="onSharedTask()" >
        Confirm
        <i class="checkmark icon"></i>
      </div>
    </div>
  </div>
</div>
<script>

</script>
